<template>
  <div class="body">
    <header class="header">
      <div class="title">
        <img src="../../assets/images/01_11.png" alt="" class="img_zuo" @click="back" />
        <div>{{dwxc_5_back.name}}巡查</div>
      </div>
    </header>
    <div class="ditu" id="ditu"></div>
    <div class="panel-head panel-head1 ">
      <div class="head-item">
        <img class="ren" src="../../assets/images/dwxc/dwpc_35.gif" />
        <span class="addusername" v-show="nameShow" @click="onnameShow(false)">
          <span v-for="(item, index) in nameactive" :key="index" v-if="index<2">{{item.userName}}&nbsp;</span>
          <span v-show="nameactive.length>2">...</span>
        </span>
        <span class="addusername" v-show="!nameShow" @click="onnameShow(true)">
          <span v-for="(item, index) in nameactive" :key="'a'+index">{{item.userName}}&nbsp;</span>
        </span>
        <!-- <span class="worker"></span> -->
        <img src="../../assets/images/dwxc/dwpc_jia.png" class="img_jia1" @click="addRen" alt="">
      </div>
      <div class="jsxc" @click="jsxc">结束巡查</div>
    </div>
    <div class="panel-head panel-head2 isShow">
      <div class="head-item">
        <span>工作人员:</span><span class="addusername name_me"></span> <span class="worker"></span>
      </div>
    </div>
    <div class="panel">
      <div class="panel-body">
        <!-- <div style="position: relative;padding:0 0.3704rem;margin-top: 0.2778rem;">
          <video controls class="video">
            <source :src="show_path+obj.video" type="video/mp4">
            <source :src="show_path+obj.video" type="video/ogg">
            您的浏览器不支持Video标签。
          </video>
        </div> -->

        <!-- <ul class="imgs_ul ">
          <li class="tp_zs">
            <img src="../../assets/images/dwxc/01.png" alt="">
          </li>
          <li class="tp_zs">
            <img src="../../assets/images/dwxc/01.png" alt="">
          </li>
          <div class="panel-body—wenzi">滴滴滴滴滴滴多多多多多多多多多多多多多多滴滴滴滴滴滴多多多多多多多多多多多多多多</div>
          <div class="ly_play " data-url="">
            <span class="ly ly_yuyin" onclick="play_yuyin(event)">
              <img src="../../assets/images/dwxc/yy_left.png" class="img_left" />
              <img src="../../assets/images/dwxc/yy.png" class="img_pp">
              <span class="ly_s">1"</span>
            </span>
          </div>
        </ul> -->

        <div v-for="(item, index) in fool_list" :key="index">
          <div class="panel-body—wenzi" v-if="item.type==1">{{item.FilePath}}</div>
          <div class="ly_play " data-url="" v-else-if="item.type==2">
            <span class="ly ly_yuyin" @click="yy_play(show_path+item.FilePath,$event)">
              <img src="../../assets/images/dwxc/yy_left.png" class="img_left" />
              <img src="../../assets/images/play.png" class="img_pp">
              <span class="ly_s">{{item.times}}"</span>
            </span>
          </div>
          <ul class="imgs_ul" v-else-if="item.type==3">
            <li class="tp_zs">
              <img :src="show_path+item.FilePath" alt="">
            </li>
          </ul>
          <div style="position: relative;padding:0 0.3704rem;margin-top: 0.2778rem;" v-else-if="item.type==4">
            <video controls class="video">
              <source :src="show_path+item.FilePath" type="video/mp4">
              <source :src="show_path+item.FilePath" type="video/ogg">
              您的浏览器不支持Video标签。
            </video>
          </div>

        </div>


      </div>
      <div class="panel-fool">
        <img src="../../assets/images/dwxc/dwpc_wz.png" class="img_dwpc_wz" data-tyle="1" alt=""
          @click="img_dwpc_wz($event)">
        <!-- <img src="../../assets/images/dwxc/yuyinico.png" class="img_dwpc_wz" data-tyle="2" alt=""> -->
        <div class="ly_box" v-show="fool_item_show">
          <div class="ly_start" @touchstart="record($event)" @touchend="recordStop">
            <span class="ly" style="margin:0;width: 7.3148rem;">
              <img src="../../assets/images/dwxc/mkf.png">
              <span>按住说话</span>
            </span>
          </div>
        </div>
        <textarea name="" rows="1" autofocus="autofocus" v-model="textareaSize" v-show="!fool_item_show"></textarea>
        <div class="btn_fs"></div>
        <img src="../../assets/images/dwxc/dwpc_pz.png" @click="pz()" class="img_dwpc_pz" alt=""
          v-show="fool_item_show">
        <img src="../../assets/images/dwxc/dwpc_fs.png" @click="send_font()" class="img_dwpc_font" alt=""
          v-show="!fool_item_show">
        <input type="hidden" id="data-id" value="">
      </div>
    </div>

    <div class="ly_tc" v-show="isLy">
      <img src="../../assets/images/dwxc/ly_dt.gif">
    </div>

    <van-popup v-model="btm_show" position="bottom" :close-on-click-overlay="false">
      <div class="btm_tk_item">上传资料</div>
      <div v-if="terminal === true" class="btm_tk_item" @click="sp">上传视频</div>
      <div class="btm_tk_item" @click="p_z">拍照</div>
      <div class="btm_tk_item btm_tk_item-end" @click="xc">从手机相册选择</div>
      <div class="btm_tk_cancle" @click="btm_show = false">取消</div>
    </van-popup>


    <!-- <div class="tk " v-show="tk_show">
      <div class="bg"></div>

      <div class="tk-box">
        <div class="tk-item">
          <div class="left ">{{tkTitle}}</div>
          <div class="right">
            <img class="close" src="../../assets/images/dwxc/tk_x.png" @click="tk_x" />
          </div>
        </div>
        <div class="tk_body" v-show="!jsxc_show">
          <div class="tk-item">
            <div class="left">张三</div>
          </div>
          <div class="tk-item">
            <div class="left">张三</div>
          </div>
          <div class="tk-item">
            <div class="left">张三</div>
          </div>
          <div class="tk-item">
            <div class="left">张三</div>
          </div>
          <div class="tk-item">
            <div class="left">张三</div>
          </div>
          <div class="tk-item">
            <div class="left">张三</div>
          </div>
          <div class="tk-item">
            <div class="left">张三</div>
          </div>
          <div class="tk-item">
            <div class="left">张三</div>
          </div>
          <div class="tk-item">
            <div class="left">张三</div>
          </div>

        </div>
        <div class="tk_body"  v-show="jsxc_show">
          <div class="tishi">
            <div class="">根据巡查要求,本次巡查结束时间应在11:00-12:00 在任意点位上结束巡查</div>
          </div>
        </div>
        <div class="tk-item btns btn_1" v-show="!jsxc_show">
          <button class="btn " type="button" @click="btn">确定</button>
        </div>
      </div>
    </div> -->
    <addStaff :delivertk_show="tk_show" :deliverjsxc_show="jsxc_show" :delivertkTitle="tkTitle"
      :delivertimeinterval="time_interval" :delivernameactive="nameactive" :deliverunames="unames"
      :delivernameShow="nameShow" @receivetkshow="handletkshow" @receivenameactive="handlenameactive"
      @receivenameShow="handlenameShow">
      <!-- @receivejsxcshow="handlejsxcshow" -->
    </addStaff>
  </div>
</template>

<script>
  import upload from "../../assets/js/upload_vue.js"
  import utils from "../../assets/js/utils.js"
  import addStaff from "./addStaff.vue"
  import qs from 'qs';
  import {
    Dialog,
    Toast
  } from 'vant';
  import terminal from "../../assets/js/terminal";
  import audio from "../../assets/js/audio.js"
  export default {
    components: {
      addStaff
    },
    name: 'dwxc_5_inspectionpoint',
    data() {
      return {
        fool_item_show: true,
        btm_show: false, //图片选择
        terminal: false,
        map: null,
        tk_show: false,//弹框显示
        tkTitle: "提示",//提示/请选择工作人员
        jsxc_show: true,//结束巡查弹框显示
        centralpoint: ["106.57", "29.55"],//中心点
        path: [
          // ["106.57", "29.55"], [106.572122, 29.551176], [106.577271, 29.552501], [106.578258, 29.554600]
        ],
        marker_list: [],
        userMarker: null,//当前点位
        geolocation_timer: null,//当前点位定时器
        obj_pink: [
          { "jwd": ["106.57", "29.55"], "sj": "00:00" },
          { "jwd": [106.572122, 29.551176], "sj": "00:00" },
          { "jwd": [106.577271, 29.552501], "sj": "02:00" },
          { "jwd": [106.578258, 29.554600], "sj": "01:00" },

        ],
        isLy: false, //语音上传某某
        play_code: 1,
        p: null,

        // 1文字 2图片 3语音 4 视频
        fool_list: [
          // { type: 1, path: "滴滴滴滴滴滴多多多多多多多多多多" },
          // { type: 2, path: "/WebFiles/img/2020-08-31/726663c6-acb7-491f-bc81-734deb8c8ffa1598869563085.jpg" },
          // { type: 3, path: "/WebFiles/voice/2020-09-01/b7f03614-a14a-4469-a6bb-4d80d1a270061598932348937.amr" },
          // { type: 4, path: "" },
        ],
        show_path: null,//ip
        textareaSize: "",//文字
        unames: null,
        nameactive: [
          // { "name": "张三", "id": 1 }
        ],
        nameShow: true,//是否展示全工作人员
        dataId: null,
        userid: null,
        polylineObjArr: [],//折现数组
        start_time: "",//開始時間
        ScopeOfRecognition: "",//相差好多米
        RecordGap: "",//好多秒执行一个请求在用一个点
        RunSecond: "",//当前定位几秒刷新
        settime: null,//定时器
        is_order: 0,//是否按顺序走 1 需要 0 不需要
        setInterval_cunt: -1,
        dangqiandaingwei_id: null,
        time_interval: "",//结束时段
        active_people: [],
        dwxc_5_back: null,
        jwd_me: '',
        addusername_ren: '',//创建人员
      }
    },
    destroyed() {
      var _this = this
      clearInterval(_this.settime)
      this.settime = null
      setTimeout(() => {
        this.$zoom.showImagesFn.hideContainer();
      })
    },
    mounted() {
      var _this = this;
      _this.centralpoint = [_this.$global_msg.centerJwd.jd, _this.$global_msg.centerJwd.wd];
      this.inof1()
      audio.init(this.mui);
      this.terminal = terminal.terminals().android;
      //切换后台
      document.addEventListener("pause", function () {
        _this.stopPlay();
      }, false);
      $('textarea').on('input', function () {
        this.style.height = 'auto';
        this.style.height = this.scrollHeight + "px";
        if (this.scrollHeight > 50) {
          $(this).css({ "line-height": "0.5556rem" })
        }
      });


      function startGetDw() {
        plus.geolocation.getCurrentPosition(function (p) {
          geolocation.getCurrentPosition();
          _this.geolocation_timer = setInterval(function () {
            // 获取当前位置信息
            geolocation.getCurrentPosition();
          }, 1000);
        }, function (e) {
          _this.tishiDw();
        });
      }

      try {
        if (plus) {
          startGetDw();
        } else {
          document.addEventListener('plusready', function () {
            startGetDw();
          }, false);
        }
      } catch (e) {
        document.addEventListener('plusready', function () {
          startGetDw();
        }, false);

      }


    },

    //进入该页面时，用之前保存的滚动位置赋值
    methods: {
      send_font() {//发送文字
        if (this.textareaSize != "") {

          try {
            plus.nativeUI.showWaiting("正在加载...");
          } catch (e) {
            console.log("plus问题");
          }
          // var date = new Date().getDay()

          var params = {
            userId: this.userid,
            dwId: this.userid,
            dataId: this.dataId,
            type: 1,
            content: this.textareaSize,
          }
          this.axios
            .post(
              `${this.$global_msg.Url.host}/DotPlacePatrol/uploadPointLocation`, qs.stringify(params)
            )
            .then((res) => {
              try {
                plus.nativeUI.closeWaiting();
              } catch (e) {
                console.log("plus问题");
              }
              console.log(res);
              if (res.data.code == 200) {
                // this.list = []
                // this.list = res.data.rows
                this.fool_list.unshift({ type: 1, FilePath: this.textareaSize })
                this.textareaSize = ""
              } else {
                this.$toast(res.data.msg);
              }
            }).catch(err=>{
              this.$terminal._error(err)
          })

        }

      },
      stopPlay() {////切换后台语音停止
        if (this.p) {
          this.p.stop();
        }
        this.play_code = 1;
        $('.img_pp').attr("src", require('../../assets/images/play.png'));
        this.$forceUpdate();
      },
      p_z() {//拍照
        var _this = this;
        _this.btm_show = false;
        upload.paizhao(function (path) {
          console.log(path);
          _this.uploadImg(path);
        }, function (msg) {
          _this.$toast(msg);
        });
      },
      xc() {//相册
        var _this = this;
        _this.btm_show = false;
        upload.xiangce('image', true, function (path) {
          console.log(path);
          path.map(res => {
            console.log(res)
            // _this.fool_list.unshift({ type: 2, path: "http://219.153.71.175:8015/yzssapp/WebFiles/img/2020-08-31/726663c6-acb7-491f-bc81-734deb8c8ffa1598869563085.jpg" })
            _this.uploadImg(res);
          })
        }, function (msg) {
          _this.$toast(msg);
        });
      },
      sp() {
        let that = this;
        that.btm_show = false;
        upload.record(function (path) {
          console.log(path);
          // alert(path)
          // let a = Array.from(path)
          //获取视频信息
          // a.map(res => {
          // })
          //获取视频信息
          plus.io.getVideoInfo({
            filePath: path,
            success: function (data) {
              // alert(JSON.stringify(data))
              console.log(data.duration)
              //视频时间15秒以内才上传
              if ((data.duration * 1) > 11) {
                that.$toast('上传的视频时间请在10秒以内');
                return;
              } else {
                that.uploadVideo(path);
              }
            },
            fail: function (e) {
              that.$toast(e.msg);
            }
          });

        }, function (msg) {
          if (msg !== 'User cancelled') {
            // that.$toast(msg+"错误2");
          }
        });
      },
      uploadImg(path) {//上传图片
        var _this = this;
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log(e.message);
        }
        var params = {
          userId: this.userid,
          dwId: this.userid,
          dataId: this.dataId,
          type: 3,
        };
        upload.uploadImg(_this.$global_msg.Url.hosts + '/DotPlacePatrol/uploadPointLocation', 'POST', params, path, 'multipartFile', function (data) {
          try {
            plus.nativeUI.closeWaiting();
          } catch (e) {
            console.log(e.message);
          }
          if (data.code == 200) {
            _this.fool_list.unshift({ type: 3, FilePath: data.rows })
          } else {
            _this.$toast(data.msg);
          }

        }, function (msg) {
          _this.$toast(msg);
          try {
            plus.nativeUI.closeWaiting();
          } catch (e) {
            console.log(e.message);
          }
        });
      },
      uploadVideo(path) {//上传视频
        var _this = this;
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log(e.message);
        }
        var params = {
          userId: this.userid,
          dwId: this.userid,
          dataId: this.dataId,
          type: 4,
        };
        upload.uploadVideo(_this.$global_msg.Url.hosts + '/DotPlacePatrol/uploadPointLocation', 'POST', params, path, 'multipartFile', function (data) {
          data = JSON.parse(data);
          try {
            plus.nativeUI.closeWaiting();
          } catch (e) {
            console.log(e.message);
          }
          if (data.code == 200) {
            _this.fool_list.unshift({ type: 4, FilePath: data.rows })
          } else {
            console.log(data);
            _this.$toast(data.msg);
          }


        }, function (msg) {
          _this.$toast(msg);
          try {
            plus.nativeUI.closeWaiting();
          } catch (e) {
            console.log(e.message);
          }
        });
      },
      updata_yuyin(ly_file, time) {//上传语音
        var _this = this
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log("plus问题");
        }
        //
        let task = plus.uploader.createUpload(
          _this.$global_msg.Url.host + '/DotPlacePatrol/uploadPointLocation',
          {
            method: "POST"
          },
          function (t, status) {
            // 上传完成
            let res = JSON.parse(t.responseText);
            console.log(res)
            if (status == 200) {
              plus.nativeUI.closeWaiting();
              if (res.code === 200) {
                _this.fool_list.unshift({ type: 2, FilePath: res.rows, times: time / 1000 })

              } else {
                Toast('上传失败！')
              }
            }
          }
        );

        task.addFile(ly_file, {
          key: "multipartFile"
        }); //上传的录音文件
        task.addData("userId", _this.userid + "");
        task.addData("dwId", _this.userid + "");
        task.addData("dataId", _this.dataId + "");
        task.addData("type", 2 + "");
        task.addData("time", time / 1000 + '');
        task.start();
      },

      yy_play(yy_path, e) {//语音播放
        var _this = this;
        var dom = $(e.currentTarget).find(".img_pp")
        _this.stopPlay()
        if (_this.play_code == 1) {
          _this.p = null;
          console.log(yy_path);
          _this.p = plus.audio.createPlayer(yy_path);
          $(dom).attr("src", require('../../assets/images/play_dt.gif'))
          console.log("进入播放");
          _this.play_code = 2;
          // localStorage.setItem('domPlay', JSON.stringify(dom));
          // localStorage.setItem('domPlayString', yy_path);
          console.log(JSON.stringify(_this.p))
          _this.p.play(() => {
            //播放完毕
            _this.play_code = 1;
            $(dom).attr("src", require('../../assets/images/play.png'));
            _this.p.close();
          },
            function (e) {
              _this.play_code = 1;
              $(dom).attr("src", require('../../assets/images/play.png'));
              _this.p.close();
              alert("Audio play error: " + e.message);
            });
        } else {
          _this.play_code = 1;
          $(dom).attr("src", require('../../assets/images/play.png'));
          _this.p.close();
        }
      },

      record(event) {//创建录音
        var _this = this;
        _this.isLy = true;
        _this.$forceUpdate();
        audio.stop();
        audio.record(function (data) {
          console.log(data);
          _this.isLy = false;
          var path = data.url;

          console.log("录音：", path)
          _this.updata_yuyin(path, data.duration)
          // _this.fool_list.unshift({ type: 3, path: "/WebFiles/voice/2020-09-01/b7f03614-a14a-4469-a6bb-4d80d1a270061598932348937.amr" })
          // audio.zhuan(path, function (res) {
          //   _this.addYuyinText(res);
          // }, function (msg) {
          //   _this.$toast(msg)
          // })
        }, function (msg) {
          console.log(msg)
          _this.$toast(msg);
          _this.isLy = false;
          _this.$forceUpdate();
        });
        event.preventDefault();
      },

      recordStop() {//停止录音
        this.isLy = false;
        audio.stop();
        this.$forceUpdate();
      },
      jsxc() {//结束巡查
        var _this = this
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log("plus问题");
        }
        var params = {
          dataId: this.dataId,
        }
        this.axios
          .post(
            `${this.$global_msg.Url.host}/DotPlacePatrol/endSpotInspection`, qs.stringify(params)
          )
          .then((res) => {
            try {
              plus.nativeUI.closeWaiting();
            } catch (e) {
              console.log("plus问题");
            }
            console.log("结束：", res);
            if (res.data.code == 201) {
              this.tk_show = true
              this.jsxc_show = true
              this.tkTitle = "提示"
              this.time_interval = res.data.rows.spotInspectionRecordTime.BeginTime1 + "-" + res.data.rows.spotInspectionRecordTime.EndTime1
              console.log(this.time_interval)
            } else if (res.data.code == 200) {
              try {
                plus.nativeUI.alert("您已完成本次点位巡查!", function () {
                  // _this.$router.push("/dwxc_1_calendar");
                  _this.$router.go(-2)
                }, "提示", "确定");
              } catch (e) {
                // _this.$router.push("/dwxc_1_calendar");
                _this.$router.go(-2)
                console.log("plus问题");
              }

              // mui.alert("您已完成本次点位巡查!")

            } else {
              this.$toast(res.data.msg);
            }
          });




      },
      addRen() {//添加人
        this.tk_show = true
        this.jsxc_show = false
        this.tkTitle = "请选择工作人员"
      },
      handletkshow(show) {//是否显示弹框
        this.tk_show = show
      },
      handlenameactive(list) {//选择人的数组
        var _this = this
        if (localStorage.getItem("username") != this.addusername_ren) {
          list.unshift({
            userName: localStorage.getItem("username"),
            userid: localStorage.getItem("userId")
          })
        }
        list.unshift({
          userName: this.addusername_ren,
          userid: 0,
        })
        this.nameactive = list
        this.active_people = []
        this.nameactive.forEach((item, i) => {
          _this.active_people.push(item.userid)
        });
        this.addpeople()

      },
      handlenameShow(bule) {
        this.nameShow = bule
      },
      onnameShow(bule) {//是否完整显示工作人员
        console.log(bule)
        if (this.nameactive.length > 2) {
          this.nameShow = bule
        }
      },
      pz() {//点击相片
        this.btm_show = true
      },
      //  返回
      back() {
        var _this = this
        clearInterval(_this.settime)
        this.settime = null
        this.$router.back()
      },
      img_dwpc_wz(e) {//切换语音/文字
        if ($(e.target).attr("data-tyle") == "1") {
          $(e.target).attr("data-tyle", "2")
          $(e.target).attr("src", require("../../assets/images/dwxc/yuyinico.png"))
          // $(".img_dwpc_pz").hide()
          // $(".img_dwpc_font").show()
          // $(".ly_box").hide()
          // $("textarea").show()
          this.fool_item_show = false
          setTimeout("$('textarea').focus()", 100);
        } else if ($(e.target).attr("data-tyle") == "2") {
          $(e.target).attr("data-tyle", "1")
          $(e.target).attr("src", require("../../assets/images/dwxc/dwpc_wz.png"))
          this.fool_item_show = true
          // $(".img_dwpc_pz").show()
          // $(".img_dwpc_font").hide()
          // $(".ly_box").show()
          // $("textarea").hide()
        }
      },
      inof() {// 创建地图
        var _this = this
        this.map = new AMap.Map('ditu', {
          resizeEnable: true,
          zoomEnable: true, //地图是否可缩放，默认值为true
        });
        // 设置中心点
        // this.map.setCenter(this.centralpoint);
        this.map.setCenter(this.path[0].jwd.split(","));
        // 设置地图级别 // PC上，参数zoom可设范围：[3,18]；// 移动端：参数zoom可设范围：[3,19]
        this.map.setZoom(14);
        _this.startGeolocation()
        this.settime = setInterval(function () {//没隔多少时间刷新当前位置
          _this.startGeolocation()
          _this._settiem()
          // console.log(111)
        }, this.RunSecond)
        this.mapmarker()



        // this.mapline()

      },
      mapmarker() {//创建坐标点/折线
        var _this = this
        var img_url = require('../../assets/images/dwxc/dwpc_19.gif');
        var content = '';

        var marker = null;
        var ce_cunt = 0;
        this.path.forEach(item => {
          // this.path[ce_cunt].addtime="00:00"
          if (this.path[ce_cunt].addtime != "00:00" && this.path[ce_cunt].addtime) {
            img_url = require('../../assets/images/dwxc/dwpc_22.gif');//绿色
          } else {
            img_url = require('../../assets/images/dwxc/dwpc_19.gif');
          }

          content = '';
          content += '<div style="text-align:center;margin-top: -0.2222rem;margin-left: -0.1111rem;">';
          content += '<img style="width: 0.6019rem;" src="' + img_url + '"/>';
          content += '<div>' + item.address + '</div>'
          content += '</div>';

          marker = new AMap.Marker({ // 创建一个 Marker 实例：
            position: item.jwd.split(","),// 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            content: content,//图片
            // anchor:'center', // 设置锚点方位
          });
          _this.marker_list.push(marker)
          _this.map.add(marker);
          // this.map.setCenter( this.path[0].jwd.split(","));
          // console.log(item.jwd.split(","))

          if (ce_cunt > 0) {//创建折线
            // console.log(ce_cunt)
            if (this.path[ce_cunt].addtime != "00:00" && this.path[ce_cunt - 1].addtime != "00:00") {
              _this.mapline("#25A303", [this.path[ce_cunt - 1].jwd.split(","), this.path[ce_cunt].jwd.split(",")])
            } else {
              _this.mapline("#FFB401", [this.path[ce_cunt - 1].jwd.split(","), this.path[ce_cunt].jwd.split(",")])
            }
          }
          ce_cunt += 1;

        });
        // this.map.setCenter(this.path[0].jwd.split(","));
      },
      marker_lv(item, n) {//创建绿色标点
        console.log(item)
        var _this = this
        _this.map.remove(_this.marker_list[n]);
        var img_url = require('../../assets/images/dwxc/dwpc_22.gif');
        var content = '';
        content += '<div style="text-align:center;margin-top: -0.2222rem;margin-left: -0.1111rem;">';
        content += '<img style="width: 0.6019rem;" src="' + img_url + '"/>';
        content += '<div>' + item.address + '</div>'
        content += '</div>';
        var lv_marker = new AMap.Marker({
          position: item.jwd.split(","),// 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          //title: '标点',
          content: content
        });
        _this.map.add(lv_marker);
        $(".user").parents(".amap-marker").addClass("dwxc_user_index")
        return lv_marker
      },
      mapline(color, path) {// 创建折线实例
        var polyline = new AMap.Polyline({
          path: path,
          borderWeight: 1, // 线条宽度，默认为 1
          strokeColor: color, // 线条颜色
          lineJoin: 'round' // 折线拐点连接处样式
        });

        // 将折线添加至地图实例
        this.map.add(polyline);
        this.polylineObjArr.push(polyline)
      },
      startGeolocation() {//开始定位
        var _this = this;
        _this.geolocation_timer = null;
        _this.map.plugin('AMap.Geolocation', function () {
          var geolocation = new AMap.Geolocation({
            // 是否使用高精度定位，默认：true
            enableHighAccuracy: true,
            // 设置定位超时时间，默认：无穷大
            //timeout: 10000,
            // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
            // buttonOffset: new AMap.Pixel(10, 20),
            //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            zoomToAccuracy: true,
            // noIpLocate:1,
            //  定位按钮的排放位置,  RB表示右下
            //buttonPosition: 'RB'
            // noIpLocate: 1,
          })
          geolocation.getCurrentPosition();
          // 监听获取位置信息成功的回调函数
          AMap.event.addListener(geolocation, 'complete', onComplete);
          // 监听获取位置信息错误的回调函数
          AMap.event.addListener(geolocation, 'error', onError);

          function usePosition(lng,lat){
            _this.jwd_me = lng + "," + lat;
            console.log(_this.jwd_me)
            var gpsPoint = GPS.gcj_decrypt(lat, lng);
            console.log(gpsPoint)
            if (_this.terminal !== true) {
              _this.markUser({ lat: gpsPoint.lat, lng: gpsPoint.lon });
            } else {
              _this.markUser({ lat: lat, lng: lng });
              // _this.markUser({lat:gpsPoint.lat,lng:gpsPoint.lon});
            }
          }

          function onComplete(data) {
            usePosition(data.position.lng,data.position.lat);
          }

          function onError(error) {
            // 定位出错
            if (error.message == 'Geolocation permission denied.') {
              //_this.tishiDw();
            }
            utils.getPosition(function(lng,lat){
              console.log('切换使用sdk获取定位成功:'+lng+','+lat);
              usePosition(lng,lat);
            },function(msg){
              console.log('获取定位错误:'+msg);
            });
          }


          var GPS = {
            PI: 3.14159265358979324,
            x_pi: 3.14159265358979324 * 3000.0 / 180.0,
            delta: function (lat, lon) {
              // Krasovsky 1940
              //
              // a = 6378245.0, 1/f = 298.3
              // b = a * (1 - f)
              // ee = (a^2 - b^2) / a^2;
              var a = 6378245.0; //  a: 卫星椭球坐标投影到平面地图坐标系的投影因子。
              var ee = 0.00669342162296594323; //  ee: 椭球的偏心率。
              var dLat = this.transformLat(lon - 105.0, lat - 35.0);
              var dLon = this.transformLon(lon - 105.0, lat - 35.0);
              var radLat = lat / 180.0 * this.PI;
              var magic = Math.sin(radLat);
              magic = 1 - ee * magic * magic;
              var sqrtMagic = Math.sqrt(magic);
              dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * this.PI);
              dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * this.PI);
              return { 'lat': dLat, 'lon': dLon };
            },

            //WGS-84 to GCJ-02
            gcj_encrypt: function (wgsLat, wgsLon) {
              if (this.outOfChina(wgsLat, wgsLon))
                return { 'lat': wgsLat, 'lon': wgsLon };

              var d = this.delta(wgsLat, wgsLon);
              return { 'lat': wgsLat + d.lat, 'lon': wgsLon + d.lon };
            },
            //GCJ-02 to WGS-84
            gcj_decrypt: function (gcjLat, gcjLon) {
              if (this.outOfChina(gcjLat, gcjLon))
                return { 'lat': gcjLat, 'lon': gcjLon };

              var d = this.delta(gcjLat, gcjLon);
              return { 'lat': gcjLat - d.lat, 'lon': gcjLon - d.lon };
            },
            //GCJ-02 to WGS-84 exactly
            gcj_decrypt_exact: function (gcjLat, gcjLon) {
              var initDelta = 0.01;
              var threshold = 0.000000001;
              var dLat = initDelta, dLon = initDelta;
              var mLat = gcjLat - dLat, mLon = gcjLon - dLon;
              var pLat = gcjLat + dLat, pLon = gcjLon + dLon;
              var wgsLat, wgsLon, i = 0;
              while (1) {
                wgsLat = (mLat + pLat) / 2;
                wgsLon = (mLon + pLon) / 2;
                var tmp = this.gcj_encrypt(wgsLat, wgsLon)
                dLat = tmp.lat - gcjLat;
                dLon = tmp.lon - gcjLon;
                if ((Math.abs(dLat) < threshold) && (Math.abs(dLon) < threshold))
                  break;

                if (dLat > 0) pLat = wgsLat; else mLat = wgsLat;
                if (dLon > 0) pLon = wgsLon; else mLon = wgsLon;

                if (++i > 10000) break;
              }
              //console.log(i);
              return { 'lat': wgsLat, 'lon': wgsLon };
            },
            //GCJ-02 to BD-09
            bd_encrypt: function (gcjLat, gcjLon) {
              var x = gcjLon, y = gcjLat;
              var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * this.x_pi);
              var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * this.x_pi);
              bdLon = z * Math.cos(theta) + 0.0065;
              bdLat = z * Math.sin(theta) + 0.006;
              return { 'lat': bdLat, 'lon': bdLon };
            },
            //BD-09 to GCJ-02
            bd_decrypt: function (bdLat, bdLon) {
              var x = bdLon - 0.0065, y = bdLat - 0.006;
              var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * this.x_pi);
              var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * this.x_pi);
              var gcjLon = z * Math.cos(theta);
              var gcjLat = z * Math.sin(theta);
              return { 'lat': gcjLat, 'lon': gcjLon };
            },
            //WGS-84 to Web mercator
            //mercatorLat -> y mercatorLon -> x
            mercator_encrypt: function (wgsLat, wgsLon) {
              var x = wgsLon * 20037508.34 / 180.;
              var y = Math.log(Math.tan((90. + wgsLat) * this.PI / 360.)) / (this.PI / 180.);
              y = y * 20037508.34 / 180.;
              return { 'lat': y, 'lon': x };
              /*
              if ((Math.abs(wgsLon) > 180 || Math.abs(wgsLat) > 90))
                  return null;
              var x = 6378137.0 * wgsLon * 0.017453292519943295;
              var a = wgsLat * 0.017453292519943295;
              var y = 3189068.5 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
              return {'lat' : y, 'lon' : x};
              //*/
            },
            // Web mercator to WGS-84
            // mercatorLat -> y mercatorLon -> x
            mercator_decrypt: function (mercatorLat, mercatorLon) {
              var x = mercatorLon / 20037508.34 * 180.;
              var y = mercatorLat / 20037508.34 * 180.;
              y = 180 / this.PI * (2 * Math.atan(Math.exp(y * this.PI / 180.)) - this.PI / 2);
              return { 'lat': y, 'lon': x };
              /*
              if (Math.abs(mercatorLon) < 180 && Math.abs(mercatorLat) < 90)
                  return null;
              if ((Math.abs(mercatorLon) > 20037508.3427892) || (Math.abs(mercatorLat) > 20037508.3427892))
                  return null;
              var a = mercatorLon / 6378137.0 * 57.295779513082323;
              var x = a - (Math.floor(((a + 180.0) / 360.0)) * 360.0);
              var y = (1.5707963267948966 - (2.0 * Math.atan(Math.exp((-1.0 * mercatorLat) / 6378137.0)))) * 57.295779513082323;
              return {'lat' : y, 'lon' : x};
              //*/
            },
            // two point's distance
            distance: function (latA, lonA, latB, lonB) {
              var earthR = 6371000.;
              var x = Math.cos(latA * this.PI / 180.) * Math.cos(latB * this.PI / 180.) * Math.cos((lonA - lonB) * this.PI / 180);
              var y = Math.sin(latA * this.PI / 180.) * Math.sin(latB * this.PI / 180.);
              var s = x + y;
              if (s > 1) s = 1;
              if (s < -1) s = -1;
              var alpha = Math.acos(s);
              var distance = alpha * earthR;
              return distance;
            },
            outOfChina: function (lat, lon) {
              if (lon < 72.004 || lon > 137.8347)
                return true;
              if (lat < 0.8293 || lat > 55.8271)
                return true;
              return false;
            },
            transformLat: function (x, y) {
              var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
              ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0;
              ret += (20.0 * Math.sin(y * this.PI) + 40.0 * Math.sin(y / 3.0 * this.PI)) * 2.0 / 3.0;
              ret += (160.0 * Math.sin(y / 12.0 * this.PI) + 320 * Math.sin(y * this.PI / 30.0)) * 2.0 / 3.0;
              return ret;
            },
            transformLon: function (x, y) {
              var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
              ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0;
              ret += (20.0 * Math.sin(x * this.PI) + 40.0 * Math.sin(x / 3.0 * this.PI)) * 2.0 / 3.0;
              ret += (150.0 * Math.sin(x / 12.0 * this.PI) + 300.0 * Math.sin(x / 30.0 * this.PI)) * 2.0 / 3.0;
              return ret;
            }
          };







          // 自动适配到合适视野范围
          // 无参数，默认包括所有覆盖物的情况
          // _this.map.setFitView();
        })
      },
      stopGeolocation() {//停止定位
        clearInterval(this.geolocation_timer);
        this.geolocation_timer = null;
      },
      markUser(lnglat) {//用户标点
        // console.log(lnglat)
        var _this = this;
        this.setInterval_cunt += 1
        var img_url = require('../../assets/images/dwxc/dwpc_25.gif');
        var content = '';
        content += '<div class="user" style="text-align:center;">';
        content += '<img style="width: 0.379629rem;height: 0.462962rem;" src="' + img_url + '"/>';
        content += '</div>';
        // 创建一个 Marker 实例：

        if (_this.userMarker) {
          _this.userMarker.setPosition([lnglat.lng, lnglat.lat]);
          _this.map.setCenter([lnglat.lng, lnglat.lat]);
          // return false
        } else {

          var user_marker = new AMap.Marker({
            position: [lnglat.lng, lnglat.lat],// 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            //title: '标点',
            content: content,
            zIndex: 110,
            zoom: 19,
            // anchor:'center', // 设置锚点方位
          });

          this.map.setCenter([lnglat.lng, lnglat.lat]);
          // 设置点标记的动画效果，此处为弹跳效果
          //marker.setAnimation('AMAP_ANIMATION_BOUNCE');
          // 将创建的点标记添加到已有的地图实例：
          //marker.dataObj = obj;
          _this.map.add(user_marker);
          _this.userMarker = user_marker;
        }
        console.log("path的长度：", _this.path.length)
        for (var n = 0; n < _this.path.length; n++) {
          console.log("nnnnnn:", n)
          var obj = _this.path[n];
          var point = [lnglat.lng, lnglat.lat]
          // [lnglat.lng, lnglat.lat]
          var point1 = obj.jwd.split(',')
          var dis = AMap.GeometryUtil.distance(point, point1);
          if (new Date() > new Date(_this.start_time)) {//判斷時間是否在開始時間后
            // console.log("=======开始时间后", n)
            if (_this.is_order == 1) {
              if (n == 0) {//第一个点
                console.log("第一个点位==============")
                _this.set_timer(dis, _this.ScopeOfRecognition, n, obj);
              } else {
                console.log("no第一个点位==============")
                if (_this.path[n].addtime == "00:00" && _this.path[n - 1].addtime != "00:00") {
                  _this.set_timer(dis, _this.ScopeOfRecognition, n, obj)
                }
              }
            } else {
              console.log("=======不安顺序循环:", n)
              //循环的当前点没有到过
              _this.set_timer(dis, _this.ScopeOfRecognition, n, obj)
            }
          }
        }
        console.log("秒数：", _this.setInterval_cunt)
        if (_this.setInterval_cunt % _this.RecordGap == 0 && _this.setInterval_cunt != 0) {
          // console.log("================")
          console.log(3 * _this.RecordGap, "秒在请求后台")
          _this.bianlv(1, null, obj)
        }




      },
      inof1() {//获取地图列表
        var _this = this
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log("plus问题");
        }
        var date = new Date().getDay()
        var params = {
          dwId: this.userid,
          dataId: this.dataId,
          isType: 1,
        }
        this.axios
          .post(
            `${this.$global_msg.Url.host}/DotPlacePatrol/getSpotInspectionRecord`, qs.stringify(params)
          )
          .then((res) => {
            try {
              plus.nativeUI.closeWaiting();
            } catch (e) {
              console.log("plus问题");
            }
            console.log("地图列表：", res);
            if (res.data.code == 200) {
              // this.list = []
              // this.list = res.data.rows
              this.path = res.data.rows.isEnd
              this.start_time = res.data.rows.spotInspectionRecordTime.BeginDateTime
              // console.log(this.start_time)
              this.ScopeOfRecognition = res.data.rows.spotInspectionRecordSix[0].ScopeOfRecognition
              // this.ScopeOfRecognition = 500
              this.RecordGap = res.data.rows.spotInspectionRecordSix[0].RecordGap
              this.RunSecond = res.data.rows.spotInspectionRecordSix[0].RunSecond
              this.fool_list = res.data.rows.spotInspectionRecordFive
              this.addusername_ren = res.data.rows.spotInspectionRecordTwo[0].addusername
              console.log(this.addusername_ren)
              this.nameactive.unshift({
                userName: this.addusername_ren,
                userid: 0,
              })
              res.data.rows.spotInspectionRecordTwo[0].worker.split(" ").forEach(element => {
                if (element != this.addusername_ren) {
                  this.nameactive.push({
                    userName: element,
                    userid: 0,
                  })
                }
              });


              // console.log(this.ScopeOfRecognition)
              // console.log(this.RecordGap)
              // console.log(this.RunSecond)
              this.inof()
              this.inof2()

            } else {
              this.$toast(res.data.msg);
            }
          });
      },
      inof2() {//获取人列表
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log("plus问题");
        }
        var params = {
          dataId: this.dataId,
          dwId: this.userid,
          phone: localStorage.getItem("phone")
        }
        this.axios
          .post(
            `${this.$global_msg.Url.host}/DotPlacePatrol/getUserList`, qs.stringify(params)
          )
          .then((res) => {
            try {
              plus.nativeUI.closeWaiting();
            } catch (e) {
              console.log("plus问题");
            }
            console.log("人：", res);
            if (res.data.code == 200) {

              res.data.rows.forEach(element => {
                if (element.IsChoese != 0) {
                  this.nameactive.forEach(element1 => {
                    if (element1.userName == element.userName) {
                      element1.userid = element.userid
                    }
                  });

                }
              });
              var list = []
              res.data.rows.forEach(element => {
                if (element.userName != this.addusername_ren) {
                  list.push(element)
                }
              });
              this.unames = list
              console.log(this.nameactive)




            } else {
              this.$toast(res.data.msg);
            }
          });
      },
      bianlv(zt, n, obj) {//在点位上请求后台
        var _this = this

        console.log("在点位上请求后台n:", n)
        // console.log("zt:", zt)
        // console.log("jwd:", obj.jwd)
        if (zt == 0) {
          if (obj.addtime != "00:00") {
            // alert("结束循环")
            return false
          }
        }
        if (zt == 1 || obj.addtime == "00:00") {
          // try {
          //   plus.nativeUI.showWaiting("正在加载...");
          // } catch (e) {
          //   console.log("plus问题");
          // }
          var params = {
            spotinspectionRecordDataid: _this.dataId,
            spotinspectionLocationDataid: _this.dangqiandaingwei_id,
            srJwd: _this.jwd_me,
            dwId: _this.userid,
          }
          this.axios
            .post(
              `${this.$global_msg.Url.host}/DotPlacePatrol/addSpotInspectionRecordAddress`, qs.stringify(params)
            )
            .then((res) => {
              try {
                plus.nativeUI.closeWaiting();
              } catch (e) {
                console.log("plus问题");
              }
              console.log("请求后台======：", res);
              if (res.data.code == 201) {
                if (zt == 0) {
                  // console.log("点位s数：",_this.path)
                  // console.log("点位n：",n)
                  // console.log("点位的绿：",_this.path[n])
                  // console.log("marke:",_this.marker_list[n])
                  _this.marker_list[n] = _this.marker_lv(_this.path[n], n)//修改点位颜色
                  _this.path[n].addtime = "19:00"
                  if (n > 0) {
                    // console.log("polylineObjArr", polylineObjArr)
                    if (_this.path[n].addtime != "00:00" && _this.path[n - 1].addtime != "00:00") {
                      console.log("变绿前")
                      _this.polylineObjArr[n - 1].setOptions({ "strokeColor": "#25A303" });
                      // map.addOverlay(_this.polylineObjArr[n - 1]);
                    }
                    if (_this.path[n].addtime != "00:00" && _this.path[n + 1].addtime != "00:00") {
                      console.log("变绿后")
                      _this.polylineObjArr[n].setOptions({ "strokeColor": "#25A303" });

                    }

                    if (_this.path[n].addtime != "00:00" && _this.path[n - 1].addtime == "00:00") {
                      console.log("变黄前")
                      _this.polylineObjArr[n - 1].setOptions({ "strokeColor": "#ffb400" });
                      // map.addOverlay(_this.polylineObjArr[n - 1]);
                    }
                    if (_this.path[n].addtime != "00:00" && _this.path[n + 1].addtime == "00:00") {
                      console.log("变黄后")
                      _this.polylineObjArr[n].setOptions({ "strokeColor": "#ffb400" });

                    }

                    // console.log("_this.polylineObjArr[n-1]",_this.polylineObjArr[n-1])
                  } else if (n == 0 && _this.path.length > 1 && _this.path[n + 1].addtime != "00:00") {
                    _this.polylineObjArr[n].setOptions({ "strokeColor": "#25A303" });

                  }
                }
              } else if (res.data.code == 200) {
                clearInterval(_this.settime)
                this.settime = null
                try {
                  plus.nativeUI.alert("您已完成本次点位巡查!", function () {
                    // _this.$router.push("/dwxc_1_calendar");
                    _this.$router.go(-2)
                  }, "提示", "确定");
                } catch (e) {
                  // _this.$router.push("/dwxc_1_calendar");
                  _this.$router.go(-2)
                  console.log("plus问题");
                }

              } else {
                this.$toast(res.data.msg);
              }
            });

        }


      },
      set_timer(dis, ScopeOfRecognition, n, obj) {//计算距离
        var _this = this
        // alert("计算距离ndis:" + dis)
        // console.log("计算距离ndis:" + dis)
        // console.log("obj:", obj)
        // console.log("计算距离n:", n)
        // _this.fool_list.unshift({ type: 1, FilePath: dis })
        if (dis < ScopeOfRecognition) {

          console.log("再范围内")
          _this.dangqiandaingwei_id = obj.dataid
          _this.bianlv(0, n, obj)
        } else {
          console.log("不再范围内")
          _this.dangqiandaingwei_id = ""
        }
      },
      addpeople() {//添加人列表
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log("plus问题");
        }
        var params = {
          userId: this.userid,
          dataId: this.dataId,
          userIds: this.active_people.join(","),
          dataIdType: 2,
        }
        this.axios
          .post(
            `${this.$global_msg.Url.host}/DotPlacePatrol/addSpotInspectionRecord`, qs.stringify(params)
          )
          .then((res) => {
            try {
              plus.nativeUI.closeWaiting();
            } catch (e) {
              console.log("plus问题");
            }
            console.log("人1：", res);
            if (res.data.code == 0) {

            } else {
              this.$toast(res.data.msg);
            }
          });
      },
      tishiDw() {
        var _this = this;
        var isAndroid = terminal.terminals().android;
        Dialog.confirm({
          title: '提示',
          message: '请打开定位',
          confirmButtonText: "去设置", //改变确认按钮上显示的文字
          cancelButtonText: "取消" //改变取消按钮上显示的文字
        }).then(() => {
          //console.log("点击了确认按钮噢")
          if (isAndroid) {//安卓系统
            var main = plus.android.runtimeMainActivity();
            var Intent = plus.android.importClass("android.content.Intent");
            var mIntent = new Intent('android.settings.LOCATION_SOURCE_SETTINGS');
            main.startActivity(mIntent);
          } else {//IOS系统
            var UIApplication = plus.ios.import("UIApplication");
            var NSURL = plus.ios.import("NSURL");
            var setting = NSURL.URLWithString("app-settings:");
            var application = UIApplication.sharedApplication();
            application.openURL(setting);
            plus.ios.deleteObject(setting);
            plus.ios.deleteObject(application);
          }
        }).catch(() => {
          //console.log("点击了取消按钮噢")
        });
        _this.stopGeolocation();
      },
      _settiem() {
        var myDate = new Date();
        var s = myDate.getHours();       //获取当前小时数(0-23)
        var f = myDate.getMinutes();     //获取当前分钟数(0-59)
        var m = myDate.getSeconds();     //获取当前秒数(0-59)
        if(s==23 && f==59 && m>30){
          this.$router.go(-2)
        }
        
      }

    },
    created() {
      this.show_path = this.$global_msg.Url.hosts + '';
      this.userid = localStorage.getItem("userId")
      this.dataId = localStorage.getItem("dwxc_4_maplist_mapdataid")
      this.dwxc_5_back = JSON.parse(localStorage.getItem("dwxc_5_back"))

    },
    beforeDestroy() {//页面关闭前关闭定时器 （这个才有用）
      var _this = this;
      clearInterval(_this.settime)
      this.settime = null
    },

  }
</script>

<style scoped>
  /* 头部 */
  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    width: 100%;
    z-index: 20;
    font-size: 0.388888rem;
    position: fixed;
    top: 0;
    left: 0;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }

  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }

  .img_jia {
    width: 0.4444rem;
    position: absolute;
    right: 0.3704rem;
  }

  /* 头部结束 */

  #main {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
  }

  /* 地图 */
  .ditu {
    height: 7rem;
    width: 100%;
    position: fixed;
    top: 1.8333333333333333rem;
    z-index: 1000;
    background: #fff;
  }

  /* 面板 */
  .panel {
    width: 100%;
    flex: 1;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    font-size: 0.388888rem;
    overflow: hidden;
    margin-top: 10.2222rem;
    position: relative;

  }

  .panel-head {
    width: 100%;
    height: 1.3889rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px #ddd solid;
    position: fixed;
    top: 8.8333333333333333rem;
    z-index: 1000;
    background: #fff;
  }

  /* .panel .panel-head span {
			color: #bdbdbd;
		} */

  .head-item {
    margin-left: 0.3704rem;
    margin-right: 0.37037rem;
    display: flex;
    align-items: center;

  }

  .panel-head .ren {
    width: 0.5rem;
    height: 0.574074rem;
    margin-right: 0.185185rem;
  }

  .panel .panel-body {
    width: 100%;
    flex: 1;
    height: 2.7778rem;
    overflow-y: auto;
    padding: 0.3704rem;
    padding-top: 0;
    padding-left: 0rem;
    padding-bottom: 1.4815rem;
    /* position: absolute;
    top: 1.3889rem; */
  }

  /* 语音 */
  .yuyin {
    width: 100%;
    height: 1.388888rem;
    display: flex;
    align-items: center;
  }

  .yuyin .yuyin-btn {
    width: 2.981481rem;
    height: 0.981481rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-left: 0.37037rem;
    border: 1px #dbdbdb solid;
    position: relative;
    border-radius: 0.111111rem;
  }

  .yuyin .yuyin-btn .icon {
    width: 0.277777rem;
    height: 0.435185rem;
    margin-left: 0.277777rem;
    margin-right: 0.09rem;
  }

  .yuyin .yuyin-btn .play {
    display: none;
  }

  .yuyin .active .unplay {
    display: none;
  }

  .yuyin .active .play {
    display: flex;
  }

  .yuyin .yuyin-btn .left-i {
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    left: -0.129629rem;
  }

  .yuyin .yuyin-btn .left-i img {
    width: 0.138888rem;
    height: 0.296296rem;
  }


  /* 语音说话 */
  .ly_box {
    position: relative;
    width: 7.3148rem;
    height: 0.9259rem;

  }

  .ly {
    margin: 0.2593rem 0 0 0rem;
    display: inline-block;
    width: 3.9815rem;
    height: 0.9259rem;
    line-height: 0.9259rem;
    border: 1Px solid #ddd;
    padding-left: 0.3704rem;
    border-radius: 0.09259259259259259rem;
    text-align: center;
    position: relative;
    box-sizing: border-box;
  }

  .ly img {
    height: 0.5555555555555556rem;
    position: absolute;
    top: 0.14814814814814814rem;
    left: 2.4074rem;
  }

  .del_ly {
    left: 4.62962962962963rem;

  }

  .ly_zhuan {
    left: 5.72962962962963rem;

  }

  .del_ly,
  .ly_zhuan {
    position: absolute;
    width: .796296rem;
    top: 0.3rem;
  }

  .ly_tc {
    position: fixed;
    background: rgba(0, 0, 0, 0.5);
    height: 3.7037037037037037rem;
    width: 3.7037037037037037rem;
    border-radius: 0.18518518518518517rem;
    text-align: center;
    z-index: 2000;
    left: 50%;
    top: 70%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 0.3888888888888889rem;
    /* display: none; */
  }

  .ly_tc>img {
    margin: 1rem auto 0 auto;
    width: 1.5rem;
  }

  .ly_start {
    display: block;
  }

  .ly_play {
    margin-left: 0.3704rem;
  }

  .ly_yuyin {
    width: 2.963rem;
    height: 0.9259rem;
    position: relative;
  }

  .ly_yuyin img.img_pp {
    left: 0.3704rem;
  }

  .ly_yuyin .ly_s {
    left: 0.9259rem;
    position: absolute;
  }

  .img_left {
    position: absolute;
    left: -0.2593rem !important;
    z-index: 1;
  }

  .noclick {
    pointer-events: none;
  }

  .name_me {
    color: #5E589E;
  }

  .panel-fool {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.1852rem 0.1111rem 0.1852rem 0.2222rem;
    background: #F7F7F7;
    border-top: 1Px solid #D0D0D0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    z-index: 200;
    box-sizing: border-box;
  }

  .img_dwpc_wz {
    width: 0.787rem;
    height: 0.787rem;
    margin-bottom: 0.0741rem;
  }

  .img_dwpc_pz {
    width: 1.1667rem;
    height: 0.9259rem;
  }

  .img_dwpc_font {
    width: 1.1667rem;
    height: 0.9259rem;
    /* display: none; */
  }

  textarea {
    /* display: none; */
    min-height: 0.7407rem;
    width: 7.3148rem;
    box-sizing: border-box;
    line-height: 0.9259rem;
    max-height: 2.7778rem;
    border: none;
    background: #fff;
  }

  /* 图片 */
  .imgs_ul {
    margin-left: 0.3704rem;
  }

  .tp_zs {
    position: relative;
    width: 4.5rem;
    overflow: hidden;
    border-radius: 0.18518518518518517rem;
    margin-top: 0.1111rem;
  }

  .tp_zs>img {
    width: 100%;
    height: 2.8703703703703702rem;
  }

  .panel-body—wenzi {
    margin-top: 0.1111rem;
    font-size: 0.3889rem;
    margin-left: 0.3704rem;
  }

  .video {
    width: 100%;
    height: 4.8703703703703702rem;

  }

  #videos {
    display: none;
  }

  .img_jia1 {
    width: 0.787rem;
    height: 0.787rem;
    margin-left: 0.1852rem;
  }

  .jsxc {
    width: 2.6852rem;
    height: 0.7778rem;
    border-radius: 0.9259rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: #7AC0FE;
    font-size: 0.3889rem;
    margin-right: 0.2315rem;
  }

  .isShow {
    display: none !important;
  }

  .worker,
  .addusername {
    font-size: 0.3889rem;
  }

  .main {
    width: 100%;
    position: fixed;
    bottom: 0;
  }

  /* 底部弹框 */
  .btm_tk_item {
    height: 1.388888rem;
    line-height: 1.388888rem;
    border-bottom: 1Px solid #DDDDDD;
    text-align: center;
    /* margin-left: 0.185185rem; */
    /* margin-right: 0.185185rem; */
    width: auto;
    background-color: #FFFFFF;
  }

  .btm_tk_item:first-child {
    border-radius: 0.148148rem 0.148148rem 0 0;
    color: #999999;
  }

  .btm_tk_item-end {
    border-radius: 0 0 0.148148rem 0.148148rem;
  }

  .btm_tk_cancle {
    font-weight: bolder;
    height: 1.3889rem;
    line-height: 1.3889rem;
    border: 1Px solid #DDDDDD;
    text-align: center;
    margin-top: 0.185185rem;
    margin-bottom: 0.185185rem;
    width: auto;
    background-color: #FFFFFF;
    border-radius: 0.148148rem;
  }

  .van-popup--bottom {
    width: 95% !important;
    margin-left: 2.5%;
    background-color: rgba(0, 0, 0, 0);
  }

  /*  */
  /* 弹框 */
  .tk {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;

  }

  .tk-hide {
    display: none !important;
  }

  .tk .bg {
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
  }

  .tk .tk-box {
    width: 8.333333rem;
    height: auto;
    background-color: #FFFFFF;
    z-index: 1002;
    border-radius: 0.222222rem;
    /* position: relative;
    padding-bottom: 1.5741rem; */
  }

  .tk .tk-item {
    width: auto;
    height: 1.388888rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px #DDDDDD solid;
    margin-left: 0.333333rem;
    margin-right: 0.333333rem;
  }

  /* .tk .tk-item:last-child {
			border: none;
		} */

  .tk .tk-item .left {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 0.3889rem;
    margin-right: 0.1852rem;
  }

  .tk .tk-item .right {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .tk .tk-item .right input {
    width: 100%;
    height: 100%;
    border: none;
    margin: 0;
    padding: 0;
    text-align: right;
  }

  .tk .tk-item .close {
    width: 0.37037rem;
    height: 0.37037rem;
  }

  .tk .date-piker {
    justify-content: space-between;
  }

  .tk .date-piker button {
    width: 3.777777rem;
    height: 1.055555rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .tk .date-piker button img {
    width: 0.444444rem;
    height: 0.444444rem;
  }

  .tk .btns {
    height: 1.5741rem;
    justify-content: center;
    /* position: absolute;
    bottom: 0;
    width: 100%; */
  }

  .tk .btns .btn {
    width: 3.648148rem;
    height: 1.0741rem;
    background-color: #2B6CFE;
    color: #fff;
    border-radius: 0.1111rem;
    font-size: 0.3889rem;
  }

  input::placeholder {
    color: #B1B1B1;
    font-size: 0.3889rem;
  }

  .img_r {
    width: 0.1852rem;
    height: 0.3426rem;
  }

  .tk_body {
    max-height: 6.9444rem;
    overflow-y: auto;
    /* padding-bottom: 10px; */
  }

  .active {
    color: #2877FE;
  }

  .tk .tishi {
    padding: 0.3333rem;
    font-size: 0.3889rem;
    height: auto;
    padding-bottom: 0.5556rem;
  }
</style>